<template>
    <div class="hello-container">
        <div>
            <!-- 通过router-link组件来导航  -->
            <!-- 通过to属性指定链接 -->
            <!-- router-link 会默认渲染成一个a标签 -->
            <router-link to="/bar">Bar</router-link>
        </div>
        <div>
            <router-link to="/foo">Foo</router-link>
        </div>
        <div>
            <router-link to="/user">User</router-link>
        </div>

        <!-- 路由出口 -->
        <!-- 路由匹配到的组件渲染在这里 -->
        <p>
            <transition>
                <router-view></router-view>
            </transition>
            <router-view name="homeA"></router-view>
            <router-view name="homeB"></router-view>
        </p>
        <!-- 访问父组件实例 -->
        <el-button @click="getParentExample">访问父组件实例</el-button>
    </div>
</template>

<script>
export default {
    name: 'HelloWorld',
    props: {
        msg: String,
    },
    methods: {
        getParentExample() {
            console.log('this.$parent',this.$parent);
            this.$parent.jumpUserPosts();
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
h3 {
    margin: 40px 0 0;
}
ul {
    list-style-type: none;
    padding: 0;
}
li {
    display: inline-block;
    margin: 0 10px;
}
a {
    color: #42b983;
}
.hello-container {
    div {
        display: inline-block;
        margin: 0 10px;
    }     
}
</style>
